<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo nav-menu"
            mode="horizontal"
            router
            background-color="#06779f"
            text-color="#024e68"
            active-text-color="#fff">
            <el-menu-item class="nav-item" index="/">
                <icon-font href="#cezhuye"/>
                主页
            </el-menu-item>
            <el-menu-item class="nav-item" index="/area">
                <icon-font href="#cequyu"/>
                区域
            </el-menu-item>
            <el-menu-item class="nav-item" index="/label">
                <icon-font href="#cebiaoqian"/>
                标签
            </el-menu-item>
            <el-menu-item class="nav-item" index="/push" v-if="getUser">
                <icon-font href="#cetuisongxiaoxi"/>
                我的推送
            </el-menu-item>
            <div class="search-box">
                <el-input placeholder="请输入内容" v-model="searchInfo.content" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="searchContent"></el-button>
                </el-input>
            </div>
            <div class="avatar" style="float: right" @mouseenter="enter" @mouseleave="leave">
                <img :src="getAvatar" class="face">
            </div>
        </el-menu>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'navMenuBar',
        data () {
            return {
                showUserInfo: false,
                loading: false,
                searchInfo: {
                    page: 1,
                    size: 20,
                    content: ''
                },
                data: {
                    page: 0,
                    total: 0,
                    data: null
                }
            }
        },
        computed: {
            ...mapGetters('user', [
                'getAvatar',
                'getUser'
            ]),
            activeIndex () {
                return this.$route.path
            }
        },
        methods: {
            enter () {
                this.$emit('toIcon', true)
            },
            leave () {
                this.$emit('toIcon', false)
            },
            searchContent () {
                this.$router.push({
                    path: `/search/${this.searchInfo.page}/${this.searchInfo.size}`,
                    query: {
                        content: this.searchInfo.content
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .nav-menu {
        padding: 0 150px;

        .search-box {
            display: inline-block;

            .el-input {
                margin: 10px auto;
                width: 300px;
                position: relative;
            }
        }

        .avatar {
            width: 50px;
            height: 50px;
            padding: 5px 5px;
            position: relative;

            .face {
                width: 100%;
                height: 100%;
                border-radius: 50% 50%;
            }
        }
    }
</style>
